<template>
  <div class="content">
    <div class="wu"></div>
    <div
      class="list"
      v-for="(item,index) in list"
      :key="index"
      @click="goMarketplaceLinkClick(item)"
    >
      <div class="cont">
        <img :src="item.img" mode="scaleToFill" />
        <div>
          <span>{{item.label}}</span>
          <p>{{item.introduce}}</p>
        </div>
      </div>
      <i-icon class="icon" type="enter" size="20" color="#a0a0a0" />
    </div>
  </div>
</template>

<script>
import {} from '@/api'

export default {
  components: {},
  props: {},
  data () {
    return {
      list: [
        {
          img: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bazaar-dis-icon.png',
          label: '分销商品',
          introduce: '上架分销市场，众多分销商帮你卖货',
          key: 'dis'
        },
        {
          img: 'https://akk.028wkf.cn/kdb-weapp-img/new-kdb-xcx/img/bazaar-stock-icon.png',
          label: '进货商品',
          introduce: '上架进货市场，众多分销商帮你卖货',
          key: 'stock'
        }
      ]
    }
  },
  computed: {
    account () {
      return this.$cookie.get('account')
    }
  },
  watch: {},
  created () {},
  mounted () {},
  onShow () {},
  methods: {
    goMarketplaceLinkClick (item) {
      const vm = this
      if (item.key === 'dis') {
        vm.$router.push(`/pages/shop-management/dis/type/main?type=${item.key}`)
      } else {
        vm.$router.push('/pages/data-analyze/stock/supply/index/main')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import 'static/styles/color.scss';
.content {
  background: #f6f8f9;
  > .wu {
    height: 15px;
  }
  > .list {
    width: 90%;
    margin: 15px auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border-radius: 6px;
    padding: 15px 0;
    box-shadow: 0 0 8px lighten($light-white, 20%);
    > .cont {
      display: flex;
      align-items: center;
      justify-content: space-between;
      > img {
        width: 50px;
        height: 50px;
        border-radius: 50px;
        margin: 0 15px;
      }
      > div {
        width: 160px;
        height: 50px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        color: #000;
        > span {
          font-size: 15px;
        }
        > p {
          font-size: 13px;
          color: #afafaf;
        }
      }
    }
    > .icon {
      margin-right: 10px;
    }
  }
}
</style>
